<template>
	<view>
		<u-row>
			<u-col span="12">
		
				<u--image class="back" src="http://47.102.203.158:2001/background/tree.jpg" mode="scaleToFill" :width="imgWidth"
					height="150" shape="square"></u--image>
			</u-col>
		</u-row>
		<view class="head">
			<u-row>
				<u-col span="1">
					&nbsp;
				</u-col>
				<u-col span="3">
					<u-avatar size="70" :src="userinfo.adv" shape="circle"></u-avatar>
				</u-col>

				<u-col span="7">
					<text class="top">{{userinfo.pickname}}</text>
				</u-col>
			</u-row>
		</view>
		<view class="fenge">
			<u-gap height="10" bgColor="#eee"></u-gap>
		</view>
		<view class="">
			<u-grid :border="false" col="4">
				<u-grid-item @click="gridclick" v-for="(listItem,listIndex) in gridlist" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="fenge">
			<u-gap height="10" bgColor="#eee"></u-gap>
		</view>
		<view class="">
			<u-cell-group>
				<u-cell @click="gotoStarList" icon="star-fill" title="我的收藏" :isLink="true"></u-cell>
				<u-cell @click="gotoAddress" icon="map-fill" title="地址管理" :isLink="true"></u-cell>
				<u-cell @click="gouserinfo" icon="account-fill" title="账号信息" :isLink="true"></u-cell>
				<u-cell icon="server-fill" title="客服中心" :isLink="true"></u-cell>
				<u-cell @click="gotoState" icon="info-circle-fill" title="查看网络状态" :isLink="true"></u-cell>
				
			</u-cell-group>
			<view class="loginBtn">
				<u-button text="退出登录" @click="showExit = true" color="#888"></u-button>
			</view>
		</view>
		 
		<u-modal :show="showExit" 
		 title="确定退出登录?" 
		 @confirm="exit" 
		 @cancel="showExit = false"
		 @close="showExit = false"
		 showCancelButton closeOnClickOverlay>
		</u-modal>
		<u-notify ref="tos" message="欢迎回来"></u-notify>

	</view>
</template>

<script>
	import {
		requestText,
		requestImg
	} from 'util/Route.js'

	export default {
		data() {
			return {
				store: {},
				userinfo: {},
				imgUrl: "",
				showExit:false,
				imgWidth:400,
				gridlist: [{
						name: 'order',
						title: '全部订单'
					},
					{
						name: 'bag',
						title: '待发货'
					},
					{
						name: 'car-fill',
						title: '待收货'
					},
					{
						name: 'red-packet-fill',
						title: '优惠卷'
					},

				],
			}
		},
		methods: {
			gotoStarList(){
				uni.navigateTo({
					url:"/pages/user/starList"
				})
			},
			gouserinfo(){
				uni.navigateTo({
					url:"/pages/user/userinfo"
				})
			},
			gotoState(){
				uni.navigateTo({
					url:"/pages/state/state"
				})
			},
			gotoAddress(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			exit(){
				uni.clearStorageSync()
				this.$store.state.userinfo = {}
				this.$store.state.isLogin = false
				
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
			gridclick(index) {
				// console.log(index);
				uni.navigateTo({
					url:'/pages/user/order?i='+index
				})
			},
			getUser() {
				//获取用户信息
				uni.$u.http.get('/users').then(res => {
					console.log(res);
					if (res.data.code === 202) {

						// console.log(res.data);

						// uni.removeStorageSync('token')
						// uni.removeStorageSync('userinfo')
						// uni.setStorageSync('isLogin','false')

						// this.$store.state.route.goUser = true
						// uni.redirectTo({
						// 	url:'/pages/login/login'
						// })
					}
					if (res.data.code === 200) {
						this.userinfo = res.data.data
						this.$store.state.userinfo = res.data.data
						uni.setStorageSync("userinfo", res.data.data)
						this.imgUrl = requestImg + '/head/' + this.userinfo.adv

					} else {
						this.$refs.tos.warning(res.data.msg)
					}
				})
			}
		},
		onLoad(){
			
			uni.$u.http.setConfig((config) => {
				/* config 为默认全局配置*/
				config.header = {
					token: uni.getStorageSync('token')
				}
				return config
			})
			
			this.store = this.$store.state
			this.getUser()
		},
		onShow() {
			uni.$u.http.setConfig((config) => {
				/* config 为默认全局配置*/
				config.header = {
					token: uni.getStorageSync('token')
				}
				return config
			})

			this.store = this.$store.state


			if (uni.getStorageSync('isLogin') !== 'true') {
				this.$store.state.route.goUser = true
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			if (this.store.route.goLogin === true) {
				this.$refs.tos.success('欢迎回来,' + this.store.userinfo.pickname)
				this.store.route.goLogin = false
			}
			this.getUser()
			
			
			// #ifndef MP-WEIXIN
				uni.onWindowResize((res) => {
					this.imgWidth = res.size.windowWidth
					
				})
			// #endif
			
			// #ifdef MP-WEIXIN
				 this.imgWidth = wx.getSystemInfoSync().windowWidth
			// #endif
			
		
		}

	}
</script>

<style lang="scss" scoped>
	.loginBtn{
		margin-top: 60rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
	}
	.head {
		margin-top: -35px;
		z-index: 99;
		position: relative;
	}

	.fenge {
		margin-top: 20rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.top {
		display: block;
		/* #ifndef MP-WEIXIN */
		margin-top: 62rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		margin-top: 62rpx;
		/* #endif */
		font-weight: 900;
	}

	.back {
		width: 100%;
		background-color: aquamarine;
	}
</style>
